<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Hello - Adele - 单曲 - 网易云音乐</title>
    <link rel="shortcut icon" href="../static/favicon.ico" type="image/x-icon">
    <script src="/js/jquery-3.4.1.min.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
        }
        a{
            text-decoration: none;
        }
        .main{
            width: 800px;
            margin: 0 auto;
            padding: 10px;
            border: 1px solid grey;
        }
        .main img{
            border: 30px solid #0c0c0c;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
        }
        .main h3{
            margin: 20px;
        }
    </style>
</head>
<body>
<div>
    <div class="header">

    </div>
    <div div="nav">

    </div>
    <div class="main">
        <img th:src="${song.albumImg}" class="song-albumImg">
        <h1 th:text="${song.name}" class="song-name"></h1>
<!--        <iframe style="height: 100%;width: 100%;"frameborder="0" id="yyy">-->
            <a href="#" th:data-id="${song.id}" class="player-btn">播放</a>
            <audio id="player" style="display: none;" src="" controls="controls"></audio>
<!--        </iframe>-->
        <h3>
            <label>歌手：</label><span class="song-singer" th:text="${song.singer}"></span>
        </h3>
        <h3>
            <label>所属专辑：</label><span class="song-albumName" th:text="${song.albumName}"></span>
        </h3>
        <h3>
            <label>评论数：</label><span class="song-commentCount" th:text="${song.commentCount}" ></span>
        </h3>
        <div th:utext="${song.lyrics}" class="song-lyrics">
        </div>

        <h1>评论</h1>
        <form action="/comment/post" method="post">
            <input type="hidden" name="nickName" value="YJW"/>
            <input type="hidden" name="songId"  th:value="${song.id}">
            <input type="text" name="content" style="width: 80%;height: 100px;" placeholder="填写你的评论"/>
            <br/>
            <button type="submit">评论</button>
        </form>

        <h3>精彩评论</h3>
        <dl th:each="comment:${comments}">
            <dt>
                <img th:src="${comment.icon}" alt=""/>
                <span th:text="${comment.nickName}"></span>
                <span th:text="${comment.content}"></span>
            </dt>
            <dt>
                <label>评论时间：</label>
                <span th:text="${#dates.format(comment.commentTime,'yyyy-MM-dd HH:mm:ss')}"></span>
                <label>点赞数：</label>
                <a href="#" th:data-id="${comment.id}" class="like-btn">
                    <span th:text="${comment.likeNum}"></span></a>
            </dt>
        </dl>

        <h3>相似歌曲</h3>
        <dl>
            <dt class="like-song">
                <!--thymeleaf if else-->
                <a th:if="${song.id  == '1375466014'}" href="/songinfo?songId=35847388" class="change-song" data-id="35847388">Hello</a>
                <a th:if="${song.id =='35847388'}" href="/songinfo?songId=1375466014" class="chang-song" data-id="1375466014">执此一念</a>
                <a th:if="${song.id  == '1331819951'}" href="/songinfo?songId=35847388" class="change-song" data-id="35847388">Hello</a>
            </dt>
            <dt class="like-song">
                <a  th:if="${song.id =='1375466014'}" href="/songinfo?songId=1331819951" class="chang-song" data-id="1331819951">像鱼</a>
                <a  th:if="${song.id =='35847388'}" href="/songinfo?songId=1331819951" class="chang-song" data-id="1331819951">像鱼</a>
                <a th:if="${song.id =='1331819951'}" href="/songinfo?songId=1375466014" class="chang-song" data-id="1375466014">执此一念</a>
            </dt>
        </dl>
    </div>
    <div>
        <footer></footer>
    </div>
</div>


<script>
    $(function () {
        //点击播放
        $(".player-btn").on('click',function (e) {
            e.preventDefault();
            let self = $(this);
            let songId = self.data("id");
            $.ajax({
                url: "/song/music",
                method: "GET",
                data: {
                    songId: songId
                },
                cache: false
            })
                .done(function (data) {
                    $("#player").show();
                    $("#player").attr("src", data);
                    document.getElementById("player").play();
                });
        });
        //点赞
        $(".like-btn").on('click',function (e) {
            e.preventDefault();
            let commentId = $(this).data('id');
            // let songId =  $(".player-btn").data('id');
            $.ajax({
                url:"/comment/like",
                method:"POST",
                data:{
                    songId:"35847388",
                    commentId:commentId
                },
                cache:false
            })
                .done(function (data) {
                    self.html(data.likeNum);
                });
        });
    });

        // //动态切换歌曲
        // $(".chang-song").on('click',function (e) {
        //     e.preventDefault();
        //     let self = $(this);
        //     let songId = self.data("id");
        //     $.ajax({
        //         url: "/songinfo/get",
        //         method:"GET",
        //         data:{
        //            songId:songId
        //         },
        //         cache:false
        //     })
        //         .done(function (data) {
        //             $(".song-albumImg").attr('src',data.albumImg);
        //             $(".song-albumName").html(data.albumName);
        //             $(".song-commentCount").html(data.commentCount);
        //             $(".song-lyrics").html(data.lyrics);
        //             $(".song-name").html(data.name);
        //             $(".song-singer").html(data.singer);
        //         });
        // })
</script>
</body>
</html>